<!-- 简单的折叠面板 -->
<template>
  <div>
    <div style="padding:15px;">
      <slot name="base"></slot>
    </div>
    <el-collapse-transition v-if="hasExpand">
      <div v-show="!isCollapse">
        <div style="padding:15px;">
          <slot name="expand"></slot>
        </div>
      </div>
    </el-collapse-transition>
    <div v-if="hasExpand" @click="collapseBlock" style="text-align:center;border:solid 1px #ccc;padding:3px;">
      <i v-if="isCollapse" class="el-icon-arrow-down"></i>
      <i v-if="!isCollapse" class="el-icon-arrow-up"></i>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'JtEasyCollapse',
    data() {
      return {
        isCollapse: true,
      }
    },
    props: {
      hasExpand: {
        required: true,
        default: true,
      }
    },
    methods: {
      collapseBlock() {
        this.isCollapse = !this.isCollapse;
      }
    }
  }

</script>
